<template>
    <div class="music_list">
        <scroll class="list" @scroll="scroll"
        :listen-scroll="listenScroll"
        :probe-type="probeType"
        ref="list">
        <!-- 难点：better-scroll的布局以及相关方法的使用，以及各种方法的封装 -->
            <div class="song_list-wrapper">
                <ul class="song_list" >
                    <li class="song_item">
                        <div class="song_name">演员</div>
                        <div class="song_desc">薛之谦·绅士</div>
                    </li>
                </ul>
            </div>
        </scroll>
    </div>
</template>

<script>
/* eslint-disable */ 
export default {
  components: {},
  props: {
      songs:{
          type:Array,
          default:[]
      }
  },
  data () {
    return {
    }
  },
  watch: {},
  computed: {},
  methods: {},
  created () {},
  mounted () {}
}
</script>
<style lang="less" scoped>
.music_list{
    padding: 20px 30px;
    box-sizing: border-box;
    width: 100%;
    .song_item{
        display: flex;
        box-sizing: border-box;
        flex-direction: column;
        height: 64px;
        padding: 10px 0;
        font-size: 14px;
        .song_name{
            flex: 1;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 20px;
        }
        .song_desc{
            flex: 1;
            margin-top: 5px;
            color: rgba(255,255,255,0.3);
            font-size: 12px;
        }
    }
}
</style>